<script setup>
import { ref } from 'vue'
import {Search, User} from '@element-plus/icons-vue'
const input1 = ref('')
const url =
    'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
const srcList = [
  'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
]
</script>

<template>
<!--<h1>美食交流</h1>-->
  <div style="display: flex;justify-content: space-between;">
    <div style="font-size: 20px;font-family:'Microsoft YaHei' ;">互联网美食分享平台</div>
    <div><el-input
        v-model="input1"
        style="width: 150px"
        size="small"
        placeholder="Please Input"
        :suffix-icon="Search"
    /></div>
  </div>

  <div align="center" style="height: 40px">
    <el-button type="primary" disabled>Home</el-button>

    <router-link to="/communication/list">
      <el-button type="primary">美食交流</el-button>
    </router-link>
    <router-link to="/notice/list">
      <el-button type="primary">美食公告</el-button>
    </router-link>
    <router-link to="/info/list">
      <el-button type="primary">美食资讯</el-button>
    </router-link>
    <router-link to="/user/info">
      <el-button type="primary">个人账户</el-button>
    </router-link>
    <router-link to="/user/star">
      <el-button type="primary">个人收藏</el-button>
    </router-link>
    <router-link to="/show/list">
      <el-button type="primary">美食展示</el-button>
    </router-link>
  </div>
  <div style="height: 20px"></div>
  <div class="flex gap-4 items-center" align="center">
    <el-input
        v-model="input1"
        style="width: 60%"
        size="large"
        placeholder="局部搜索"
        :suffix-icon="Search"
    />
    <router-link to="/com_info/list">
      <el-button type="primary" round>发布内容</el-button>
    </router-link>
  </div>
  <div style="height: 20px"></div>
  <div>
    <table align="center">
      <tr>
        <td>
          <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              style="width: 50%;"
          /><br>
          <font>美味汉堡</font><br>
          <span style="color: gray;font-size: 14px"><el-icon><User /></el-icon>小明    点赞1 点击120</span>

        </td>
        <td>
          <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              style="width: 50%;"
          /><br>
          <font>美味汉堡</font><br>
          <span style="color: gray;font-size: 14px"><el-icon><User /></el-icon>小明    点赞1 点击120</span>

        </td>
      </tr>
      <tr>
        <td>
          <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              style="width: 50%;"
          /><br>
          <font>美味汉堡</font><br>
          <span style="color: gray;font-size: 14px"><el-icon><User /></el-icon>小明    点赞1 点击120</span>

        </td>
        <td>
          <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              style="width: 50%;"
          /><br>
          <font>美味汉堡</font><br>
          <span style="color: gray;font-size: 14px"><el-icon><User /></el-icon>小明    点赞1 点击120</span>

        </td>
      </tr>
    </table>
  </div>
  <div style="height: 20px"></div>
  <div class="pagination-container">
    <el-pagination
        size="large"
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
    />
  </div>
</template>

<style scoped lang="scss">
  table{
    width: 500px;
    height: 400px;
    border:1px solid;
    border-collapse: collapse;
  }
  td{
    border: 1px solid lightgray;
  }
  font{
    font-family: "Microsoft YaHei";
    font-size: 20px;
  }
  .pagination-container {
    display: grid;
    place-items: center;
  }
</style>